<template>
    <div class="app">
        <div id="printTable">
            <div>
                <h2 style="font-size: 20px; margin-left: 20px;">填报详情</h2>
            </div>
            <div class="titleipt" id="titlemessage">
                <h1 class="titleh">难度申报</h1>
            </div>
            <div class="flex">
                <el-input v-model="projectnumber.first" :readonly="true" >
                </el-input>
                <template v-for="(item, index) in projectfirst" :key="index">
                    <el-input v-model="item.projectencode">
                    </el-input>
                </template>
            </div>
            <div class="flex">
                <el-input :readonly="true" class="no-border">
                </el-input>
                <template v-for="(item, index) in projectfirst" :key="index">
                    <el-input v-model="item.projectscore">
                    </el-input>
                </template>
            </div>

            <div class="flex">
                <el-input v-model="projectnumber.second" :readonly="true" >
                </el-input>
                <template v-for="(item, index) in projectsecond" :key="index">
                    <el-input v-model="item.projectencode">
                    </el-input>
                </template>
            </div>
            <div class="flex">
                <el-input value='' :readonly="true" class="no-border">
                </el-input>
                <template v-for="(item, index) in projectsecond" :key="index">
                    <el-input v-model="item.projectscore">
                    </el-input>
                </template>
            </div>


            <div class="flex">
                <el-input v-model="projectnumber.third" :readonly="true" >
                </el-input>
                <template v-for="(item, index) in projectthird" :key="index">
                    <el-input v-model="item.projectencode">
                    </el-input>
                </template>
            </div>
            <div class="flex">
                <el-input value='' :readonly="true" class="no-border">
                </el-input>
                <template v-for="(item, index) in projectthird" :key="index">
                    <el-input v-model="item.projectscore">
                    </el-input>
                </template>
            </div>


            <div class="flex">
                <el-input v-model="projectnumber.fourth" :readonly="true" >
                </el-input>
                <template v-for="(item, index) in projectfourth" :key="index">
                    <el-input v-model="item.projectencode">
                    </el-input>
                </template>
            </div>
            <div class="flex">
                <el-input value='' :readonly="true" class="no-border">
                </el-input>
                <template v-for="(item, index) in projectfourth" :key="index">
                    <el-input v-model="item.projectscore">
                    </el-input>
                </template>
            </div>


            <el-input v-model="team.address" :readonly="true">
                <template>详细地址</template>
            </el-input>
        </div>
        <div class="btn">
            <el-button type="primary" v-print="'#printTable'">打印</el-button>
            <el-button type="warning" @click="goBack">关闭</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const projectfirst = ref([{
    projectscore:'分值',
    projectencode:'编码'
},{
    projectscore:'',
    projectencode:''
},{
    projectscore:'',
    projectencode:''
},{
    projectscore:'',
    projectencode:''
}])

const projectsecond = ref([{
    projectscore:'分值',
    projectencode:'编码'
},{
    projectscore:'',
    projectencode:''
},{
    projectscore:'',
    projectencode:''
},{
    projectscore:'',
    projectencode:''
}])

const projectthird = ref([{
    projectscore:'分值',
    projectencode:'编码'
},{
    projectscore:'',
    projectencode:''
},{
    projectscore:'',
    projectencode:''
},{
    projectscore:'',
    projectencode:''
}])

const projectfourth = ref([{
    projectscore:'分值',
    projectencode:'编码'
},{
    projectscore:'',
    projectencode:''
},{
    projectscore:'',
    projectencode:''
},{
    projectscore:'',
    projectencode:''
}])


const projectnumber = ref(
    {first:'第一段'
    ,second:'第二段'
    ,third:'第三段'
    ,fourth:'第四段'})
    


const team = ref([{
    teamname:'',
    teamid:'',
    teamabbreviation:'',
    address:'',
    teamleader:'',
    phone:'',
    email:'',
    teamtype:'', 
}
]);

function goBack(){
    router.back();
}

</script>
<style lang="less" scoped>
.app {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
}

.el-table .warning-row {
    background: oldlace !important;
}

.el-table .success-row {
    background: #f0f9eb !important;
}

.flex {
    display: flex;
}

.btn {
    text-align: center;
}

.titleipt {
    text-align: center;
}

.titleh {
    display: inline-block;
    font-size: 24px !important;
}

#titlemessage {
    border: 1px solid #dcdfe6;
    height: 40px !important;
    line-height: 1px;
}

/deep/ .no-border .el-input__wrapper {
    box-shadow: none;
}

/deep/ .el-input-group__prepend {
    color: black;
}

/deep/ .cell {
    color: black;
}
</style>